<template>
  <div class="box">
    <div class="renderos">
      <iframe id="iframe" src="player.html" frameBorder="0" width="100%" scrolling="no" height="100%"></iframe> 
    </div>
    <img class="nav" src="../public/img/nav.png" alt="">
    <router-view />
    <div class="btm" v-if="$route.path == '/'">
      <img @click="set()" class="btn_img" src="../public/img/btn.png" alt="" />
      <img class="btn_img" src="../public/img/btn1.png" alt="" />
    </div>
    <div class="btm" v-if="$route.path == '/Vantage'">
      <img class="btn_img" src="../public/img/zcys.png" alt="" />
      <img class="btn_img" src="../public/img/cyys.png" alt="" />
      <img
        class="btn_img"
        @click="checkindex()"
        src="../public/img/yqfw.png"
        alt=""
      />
    </div>
    <div class="btm_" v-if="$route.path == '/ParkInvest'">
      <img
        class="btn_img"
        @click="setTab1()"
        src="../public/img/4_btn1.png"
        alt=""
      />
      <img
        class="btn_img"
        @click="setTab2()"
        src="../public/img/4_btn2.png"
        alt=""
      />
      <img
        class="btn_img"
        @click="setTab3()"
        src="../public/img/4_btn3.png"
        alt=""
      />
      <img class="btn_img" src="../public/img/4_btn4.png" alt="" />
    </div>
    <div class="btm_tabs">
      <TabBar></TabBar>
    </div>
  </div>
</template>
<script>
import TabBar from "./components/TabBar.vue"
export default {
  components: {
    TabBar
  },
  data() {
    return {

    }
  },
  methods: {
    checkindex() {
      console.log(this.$store.state.check)
      let data = this.$store.state.check
      data = !data
      this.$store.commit("setCheck", data)
    },
    set() {
      let data = this.$store.state.overstatus
      data = !data
      this.$store.commit("setOverstatus", data)
    },
    setTab1() {
      let data = this.$store.state.invest
      for (let i = 0; i < data.length; i++) {
        data[i] = false
      }
      data[0] = true
      this.$store.commit("setInvest", data)
    },
    setTab2() {
      let data = this.$store.state.invest
      for (let i = 0; i < data.length; i++) {
        data[i] = false
      }
      data[1] = true
      this.$store.commit("setInvest", data)
    },
    setTab3() {
      let data = this.$store.state.invest
      for (let i = 0; i < data.length; i++) {
        data[i] = false
      }
      data[2] = true
      this.$store.commit("setInvest", data)
    }
  },
  mounted() {
    console.log(this.$route.path)
  }
}
</script>
<style scoped>
* {
  /* background: rgba(201, 201, 201, 0.262); */
}
.box {
  width: 100%;
  height: 100%;
}
.renderos {
  width: 100%;
  height: 100%;
  background: rgb(166, 166, 166);
  position: absolute;
  z-index: -5;
}
.nav {
  width: 100%;
  height: 100px;
}
.btm_tabs {
  position: absolute;
  width: 100%;
  height: 100px;
  bottom: 0;
  /* border: 1px solid black; */
  background: url("../public/img/btm.png") no-repeat;
  background-size: cover;
}
.btn_img {
  width: 150px;
  height: 44px;
}
.btm {
  display: flex;
  justify-content: space-between;
  width: 549px;
  height: 46px;
  /* border: 1px solid black; */
  position: absolute;
  bottom: 130px;
  left: 0;
  right: 0;
  margin: auto;
}
.btm_ {
  display: flex;
  justify-content: space-between;
  width: 709px;
  height: 46px;
  /* border: 1px solid black; */
  position: absolute;
  bottom: 130px;
  left: 0;
  right: 0;
  margin: auto;
}
</style>
